
<template>
  <div id="center" :class="{'isiphone':$isiphone}">
    <div class="top">
      <div class="one">
        <div class="detail" @click="JumpcenterInfo">
          <!-- <img src="../../../wechat/static/images/hx_cg.png" alt=""> -->
          <img :src="img" alt>
          <span>{{name}}</span>
        </div>
        <div class="btn">
          <a href="javascript:;" @click="JumpCoupon">
            <img src="../../../wechat/static/images/grzx_kq.png" alt> 我的卡券
          </a>
          <a href="#/address">
            <img src="../../../wechat/static/images/grzx_dd.png" alt> 收货地址
          </a>
        </div>
      </div>
    </div>
    <div class="middle">
      <div class="two">
        <h4>我的订单</h4>
        <div class="box">
          <a href="#/order?type=0">
            <span v-if="waitO.length"  class="dot">{{waitO.length}}</span>
            <img src="../../../wechat/static/images/dzyhzx_dfk.png" alt> 待付款
          </a>
          <a href="#/ticket?type=0">
            <img src="../../../wechat/static/images/dzyhzx_dsy.png" alt> 电子券
          </a>
          <a href="#/order?type=1">
            <img src="../../../wechat/static/images/dzyhzx_ywc.png" alt> 已完成
          </a>
        </div>
      </div>
      <!-- <div class="two">
        <h4>我的电子券</h4>
        <div>
          <a href="#/ticket?type=0">
            <img src="../../../wechat/static/images/dzyhzx_dsy.png" alt> 待使用
          </a>
          <a href="#/ticket?type=1">
            <img src="../../../wechat/static/images/dzyhzx_ysy.png" alt> 已使用
          </a>
        </div>
      </div> -->
      <div class="three">
        <ul>
          <li @click="showService = true">
            联系客服
            <img src="../../../wechat/static/images/dzyhzx_next.png" alt>
          </li>
          <li @click="$router.push('/feedback')">
            意见反馈
            <img src="../../../wechat/static/images/dzyhzx_next.png" alt>
          </li>
          <li @click="$router.push('/replyList')">
            平台回复
            <div v-if="nocount" class="dot">{{nocount}}</div>
            <img src="../../../wechat/static/images/dzyhzx_next.png" alt>
          </li>
          <li @click="$router.push('/help')">
            帮助指南
            <img src="../../../wechat/static/images/dzyhzx_next.png" alt>
          </li>
          <li @click="$router.push('/about')">
            关于平台
            <img src="../../../wechat/static/images/dzyhzx_next.png" alt>
          </li>
        </ul>
      </div>
    </div>
    <tabbar>
      <tabbar-item link="/home">
        <img slot="icon" src="../../../wechat/static/images/tab_home_n.png">
        <span
          slot="label"
          style="font-family: PingFang-SC-Medium;
    font-size: 0.24rem;
    color: #999999;"
        >首页</span>
      </tabbar-item>
      <tabbar-item selected>
        <img slot="icon" src="../../../wechat/static/images/tab_grzx_s.png">
        <span
          slot="label"
          style="font-family: PingFang-SC-Medium;
    font-size: 0.24rem;
    color: #ec1b24;"
        >我的</span>
      </tabbar-item>
    </tabbar>
    <div class="hide serviceHide" v-show="showService">
      <div class="mask" @click="showService=false"></div>
      <div class="content">
        <div class="one">
          <img @click="showService=false" src="../../../wechat/static/images/tc_sc.png" alt>
        </div>
        <div class="two">
          <ul>
            <li>
              <a :href="'tel:'+servicePhone">呼叫</a>
            </li>
            <li>
              <a
                @click="copyPhone"
                v-clipboard:copy="servicePhone"
                　　v-clipboard:success="onCopy"
                　　v-clipboard:error="onError"
                href="javascript:;"
              >复制</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Tabbar, TabbarItem, XDialog } from "vux";
export default {
  name: "center",
  data() {
    return {
      showService: false,
      servicePhone: localStorage.getItem("servicePhone") || "",
      img: localStorage.getItem("userImg") || "",
      name: localStorage.getItem("NuserName") || "",
      phone: localStorage.getItem("userPhone") || "",
      nocount:'',
      waitO:[]
    };
  },
  mounted() {
    this.findMsg()
    this.getList()
    if (!this.img) {
      this.findEsShopUserCoreById();
      this.findEsPlatformById();
    }
  },
  created() {},
  methods: {
    getList() {
      let url =
        this.$CONSTANT.ORDER.findEsPayOrderByPage +
        "?sessionId=" +
        this.$common.getCookie("sessionId");
      let param = {
        pageIndex: 1,
        pageSize: 1000,
        isPay: '',
        userId:localStorage.getItem('userId')||''
      };
      // this.$vux.loading.show({
      //   text: 'Loading'
      // })
 
      this.$common.post(url, param, res => {
 
        if (res.status == 200) {
          var bussData = res.data.bussData;
          bussData.forEach(element => {
            if(element.status == 'wait'){
              this.waitO.push({
                name: element.esPayOrderDetailDTO[0].goodsName,
                img: element.esPayOrderDetailDTO[0].photos[0].fileUrl,
                money: element.totalPrice,
                number: element.esPayOrderDetailDTO[0].nums,
                id: element.id
              })
            } 
          });
        } else {
 
        }
      });
 
    },
    findEsShopUserCoreById() {
      let url =
        this.$CONSTANT.MY.findEsShopUserCoreById +
        "?sessionId=" +
        this.$common.getCookie("sessionId");
      let param = {};
      this.$vux.loading.show({
        text: "正在获取个人信息"
      });
      this.$common.post(url, param, res => {
        setTimeout(() => {
          this.$vux.loading.hide();
        }, 800);
        if (res.status == 200) {
          var bussData = res.data.bussData;
          this.name = bussData.trueName
            ? bussData.trueName
            : bussData.weixinUserCoreDTO?bussData.weixinUserCoreDTO.weixinUsername:'普通用户';
          //  bussData.weixinUserCoreDTO
          //   ? bussData.weixinUserCoreDTO.weixinUsername
          //   : bussData.trueName;
          this.phone = bussData.mobile;
          localStorage.setItem("userPhone", bussData.mobile);
          localStorage.setItem("NuserName", this.name);
          this.phone = bussData.mobile;
          this.img =
            bussData.photos.length > 0
              ? bussData.photos[0].fileUrl
              : bussData.weixinUserCoreDTO
              ? bussData.weixinUserCoreDTO.headimgurl
              : "";

          // bussData.weixinUserCoreDTO
          //   ? bussData.weixinUserCoreDTO.headimgurl
          //   : bussData.photos[0].fileUrl;
          localStorage.setItem("userImg", this.img);
        } else {
          this.$vux.toast.show({
            text: res.msg,
            type: "warn",
            width: "auto"
          });
        }
      });
    },
    findMsg() {
      let url =
        this.$CONSTANT.MY.findByUserAskNum +
        "?sessionId=" +
        this.$common.getCookie("sessionId")
      let param = {
        
      };
      this.$common.post(url, param, res => {
        if (res.status == 200) {
          this.nocount = res.data.bussData
        } else {
          
        }
      });
    },
    findEsPlatformById() {
      let url =
        this.$CONSTANT.MY.findEsPlatformById +
        "?sessionId=" +
        this.$common.getCookie("sessionId");
      let param = {
        id: 1
      };
      this.$common.post(url, param, res => {
        if (res.status == 200) {
          var bussData = res.data.bussData;
          this.servicePhone = bussData.mobile;
          localStorage.setItem("servicePhone", this.servicePhone);
        } else {
          this.$vux.toast.show({
            text: res.msg,
            type: "warn",
            width: "auto"
          });
        }
      });
    },
    onCopy() {
      this.$vux.toast.show({
        text: "复制成功",
        type: "",
        width: "auto"
      });
    },
    onError() {
      this.$vux.toast.show({
        text: "复制失败",
        type: "warn",
        width: "auto"
      });
    },
    copyPhone() {
      // document.execCommand("Copy")
    },
    JumpcenterInfo() {
      // localStorage.setItem("NuserName", this.name);
      // localStorage.setItem("userPhone", this.phone);
      // localStorage.setItem("userImg", this.img);
      this.$router.push({
        path: "/centerInfo"
      });
    },
    JumpCoupon() {
      this.$router.push({
        path: "/coupon"
      });
    }
  },
  components: {
    Tabbar,
    TabbarItem,
    XDialog
  }
};
</script>

<style lang="less">
#center {
  // margin-bottom: 60px;
  .top {
    .one {
      .detail {
        padding: 0 0 0 10px;
        height: 113px;
        line-height: 113px;
        background: #f22f37;
        img {
          display: inline-block;
          width: 63px;
          height: 63px;
          vertical-align: middle;
          margin-right: 11px;
          border: 1px solid transparent;
          border-radius: 50%;
        }
        span {
          font-size: 16px;
          color: #fff;
          font-family: PingFang-SC-Medium;
        }
      }
      .btn {
        background: #f4565d;
        height: 39px;
        line-height: 39px;
        font-size: 0;
        a {
          display: inline-block;
          width: 50%;
          font-size: 12px;
          color: #fff;
          font-family: PingFang-SC-Medium;
          text-align: center;
          box-sizing: border-box;
          margin: 13px 0;
          height: 14px;
          line-height: 14px;
          img {
            width: 15px;
            height: 13px;
            vertical-align: middle;
          }
          &:last-child {
            border-left: 1px solid #e1e1e1;
            img {
              width: 12px;
              height: 14px;
            }
          }
        }
      }
    }
  }
  .middle {
    position: relative;
    margin-top: 8px;
    // padding: 0 10px;
    > div {
      background: #fff;
      margin-bottom: 10px;
      margin: 0 0px 10px;
    }
    .two {
      h4 {
        font-size: 14px;
        color: #333;
        font-family: PingFang-SC-Bold;font-weight: 600;
        height: 43px;
        line-height: 43px;
        padding-left: 15px;
        margin: 0 10px;
        border-bottom: 1px solid #efefef;
      }
      div {
        text-align: center;
        padding: 20px;
        font-size: 0;
        a {
          position: relative;
          display: inline-block;
          flex: 1;
          font-size: 12px;
          color: #333;
          font-family: PingFang-SC-Medium;
          text-align: center;
          .dot{
            position: absolute;
            right: 25px;
            top: 5px;
            width: 14px;
            height: 14px;
            text-align: center;
            line-height: 14px;
            border-radius: 50%;
            background-color: #EC1B24;
            font-size:10px;
            font-family:PingFang SC;
            font-weight:500;
            color:rgba(255,255,255,1);
          }
          img {
            width: 59px;
            height: 59px;
            display: block;
            margin: 0 auto 3px;
          }
        }
      }
    }
    .three {
      ul {
        li {
          position: relative;
          height: 49px;
          line-height: 49px;
          border-bottom: 1px solid #e1e1e1;
          margin: 0 16px;
          font-size: 15px;
          color: #333;
          font-family: PingFang-SC-Medium;
          .dot{
            position: absolute;
            right: 14px;
            top: 18px;
            width: 14px;
            height: 14px;
            text-align: center;
            line-height: 14px;
            border-radius: 50%;
            background-color: #EC1B24;
            font-size:10px;
            font-family:PingFang SC;
            font-weight:500;
            color:rgba(255,255,255,1);
          }
          img {
            float: right;
            width: 5px;
            height: 9px;
            margin-top: 21px;
          }
          &:last-child {
            border-bottom: none;
          }
        }
      }
    }
  }
  .weui-tabbar {
    position: fixed;
    .weui-tabbar__item {
      img {
        width: 21px;
        height: 21px;
        margin-top: 3px;
      }
    }
    .weui-bar__item_on {
      img {
        width: 23px;
        height: 21px;
      }
      .weui-tabbar__label {
        span {
          font-family: PingFang-SC-Medium;
          font-size: 12px;
          color: #ec1b24;
        }
      }
    }
    &:before {
      border: none;
    }
  }
}
</style>
